<template>
    <div class="subDiv">这是子模块的地盘了<br>
        <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
        <h2>姓名：{{person.name}}</h2>
        <h2>年龄：{{person.age}}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="chargeAge">增长年龄</button>
        <button @click="chargePerson">修改人</button>
    </div>
    
</template>

<script setup lang="ts" name="Person">
    import { watch, reactive } from 'vue';

    let person=reactive({
        name:'张三',
        age:18
    })

    function changeName(){
        person.name+='~';
    }
    function chargeAge(){
        person.age++;
    }
    function chargePerson(){
        console.log('修改整个人');
        Object.assign(person,{name:'李四',age:30});
        
    }

    //情况三：监视【reactive】定义的【对象类型】数据，默认开启深度监视{deep:true}，且不能关闭
    // 第一个参数：监控对象；第二个参数：回调函数；3.配置对象，可以配置deep和immediate
    watch(person,(newValue,oldValue)=>{
        console.log('整个人都变了',newValue,oldValue);
    })
   
</script>

<style scoped>
    .subDiv{
        color:blue;
        background-color:rgb(210, 205, 205);
        width: 800px;
        height: 300px;
        font-size: 15px;
        }
    button{
        width: 100px;
        height: 30px;
        font-size: 15px;
        }
</style>